<template>
  <div>
    <Row class="banner">
      <h1>论坛活跃情况</h1>
      <h2>贵阳市消防支队论坛活跃度情况展示</h2>
    </Row>
    <Row :gutter="16" type="flex" justify="start" class="row">
      <Col span="12">
        <Card>
          <p slot="title">
            <span>文化建设论坛发帖情况</span>
          </p>
          <div class="chart" id="chart-forum-publish"></div>
          <Divider />
          <span class="text">论坛当前帖子总数：{{postCount}}</span>
          <Spin v-show="loading.forumPublish" fix size="large"></Spin>
        </Card>
      </Col>
      <Col span="12">
        <Card>
          <p slot="title">
            <span>文化建设论坛帖子热度</span>
          </p>
          <div class="chart" id="chart-forum-active"></div>
          <Divider />
          <span class="text">活跃度最高版块：{{maxAlive}}</span>
          <Spin v-show="loading.forumActive" fix size="large"></Spin>
        </Card>
      </Col>
    </Row>
    <Row :gutter="16" type="flex" justify="start" class="row">
      <Col span="24">
        <Card>
          <p slot="title">
            <span>文化建设论坛帖子一览表</span>
          </p>
          <ul class="toolbar" slot="extra">
            <li class="item">
              <span class="text">按专栏筛选</span>
              <Select v-model="blockName" size="default">
                <Option v-for="(item,index) in blockList" :value="item" :key="'bn-'+index">{{item}}</Option>
              </Select>
            </li>
            <li class="item">
              <span class="text">按时间筛选</span>
              <Date-picker
                type="datetimerange"
                placeholder="选择起止日期和时间"
                style="width:320px;"
                size="default"
                @on-change="handleSelectedDate"
              ></Date-picker>
            </li>
            <li class="item">
              <Input
                v-model="keyword"
                size="default"
                enter-button="立即搜索"
                :search="true"
                placeholder="请输入帖子标题搜索"
                @on-search="renderTable(0)"
              ></Input>
            </li>
          </ul>
          <Table :columns="tableColumns" :data="tableData"></Table>
          <Divider />
          <Page :total="pageCount" show-evalator :page-size="pageSize" @on-change="renderTable"></Page>
          <Spin fix size="large" v-if="loading.table"></Spin>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "",
  data() {
    return {
      loading: {
        forumPublish: false,
        forumActive: false,
        table: false
      },
      option: {
        forumPublish: null,
        forumActive: null
      },
      postCount: 0,
      maxAlive: null,
      blockName: null,
      blockList: [],
      startTime: this.dateShift(-720) + " 00:00:00",
      endTime: this.dateShift(0) + " 23:59:59",
      keyword: null,
      pageCount: 0,
      pageSize: 10,
      tableData: [],
      tableColumns: [
        {
          title: "序号",
          key: "index",
          align: "center",
          width: 80
        },
        {
          title: "帖子标题",
          key: "postTitle",
          align: "center"
        },
        {
          title: "所属专栏",
          key: "postBlock",
          align: "center"
        },
        {
          title: "发布时间",
          key: "postTime",
          align: "center"
        },
        {
          title: "发帖人",
          key: "postName",
          align: "center"
        },
        {
          title: "浏览次数",
          key: "browseCount",
          align: "center",
          width: 120
        },
        {
          title: "评论数",
          key: "commentCount",
          align: "center",
          width: 120
        }
      ]
    };
  },
  methods: {
    renderChart_ForumPublish() {
      this.loading.forumPublish = true;
      this.option.forumPublish = {
        tooltip: { show: true, trigger: "axis", formatter: "{a}:{b}\n{c}个" },
        grid: {
          top: 20,
          left: 20,
          right: 20,
          bottom: 20,
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: { textStyle: { fontSize: 12 } },
          splitLine: { show: true, lineStyle: { color: "#33333320" } }
        },
        yAxis: {
          type: "value",
          axisLabel: { textStyle: { fontSize: 12 } },
          splitLine: { show: true, lineStyle: { color: "#33333320" } }
        },
        series: [
          {
            type: "bar",
            barWidth: "35%",
            data: [],
            itemStyle: {
              normal: {
                show: true,
                barBorderRadius: [8, 8, 0, 0],
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: this.COLORS[2]
                    },
                    { offset: 1, color: this.COLORS[4] }
                  ]
                }
              }
            },
            label: {
              show: true,
              position: "top",
              formatter(n) {
                return n.value + "个";
              }
            }
          }
        ]
      };
      let params = {
        startTime: this.dateShift(-722) + " 00:00:00",
        endTime: this.dateShift(0) + " 23:59:59"
      };
      axios
        .get(this.URLHEAD_DVS + "WHJSLTHYPro", { params: params })
        .then(res => {
          let json = res.data;
          this.option.forumPublish.xAxis.data = json.Data.map(o => {
            return o.name;
          });
          this.option.forumPublish.series[0].data = json.Data.map(o => {
            return { name: o.name, value: o.value1 };
          });
          this.$Crender("chart-forum-publish", this.option.forumPublish);
          this.loading.forumPublish = false;
        });
    },
    renderChart_ForumActive() {
      this.loading.forumActive = true;
      this.option.forumActive = {
        tooltip: { show: true, trigger: "axis", formatter: "{a}:{b}\n{c}个" },
        grid: {
          top: 20,
          left: 20,
          right: 20,
          bottom: 20,
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: { textStyle: { fontSize: 12 } },
          splitLine: { show: true, lineStyle: { color: "#33333320" } }
        },
        yAxis: {
          type: "value",
          axisLabel: { textStyle: { fontSize: 12 } },
          splitLine: { show: true, lineStyle: { color: "#33333320" } }
        },
        series: [
          {
            name:'热度指数',
            type: "bar",
            barWidth: "35%",
            data: [],
            itemStyle: {
              normal: {
                show: true,
                barBorderRadius: [8, 8, 0, 0],
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: this.COLORS[1]
                    },
                    { offset: 1, color: this.COLORS[0] }
                  ]
                }
              }
            },
            label: {
              show: true,
              position: "top",
              formatter(n) {
                return n.value;
              }
            }
          }
        ]
      };
      let params = {
        startTime: this.dateShift(-722) + " 00:00:00",
        endTime: this.dateShift(0) + " 23:59:59"
      };
      axios
        .get(this.URLHEAD_DVS + "WHJSLTHYPro", { params: params })
        .then(res => {
          let json = res.data;
          this.option.forumActive.xAxis.data = json.Data.map(o => {
            return o.name;
          });
          this.option.forumActive.series[0].data = json.Data.map(o => {
            return { name: o.name, value: o.value2 };
          });
          this.$Crender("chart-forum-active", this.option.forumActive);
          this.loading.forumActive = false;
        });
    },
    renderTable(index) {
      this.loading.table = true;
      let params = {
        pageIndex: index,
        pageSize: this.pageSize,
        startTime: this.startTime,
        endTime: this.endTime,
        BT: this.keyword,
        type: this.blockName
      };
      axios
        .get(this.URLHEAD_TA + "WHJSLTHY_TC", { params: params })
        .then(res => {
          let json = res.data;
          this.tableData = json.Data.list.map((o, i) => {
            return {
              index: i + 1,
              postTitle: o.BT,
              postBlock: o.TZLX,
              postTime: o.FBSJ,
              postName: o.ZZ,
              browseCount: o.CK,
              commentCount: o.HF
            };
          });
          this.pageCount = json.Data.count;
          this.loading.table = false;
        });
    },
    renderAbstract() {
      axios.get(this.URLHEAD_TA + "GetBBSInfo").then(res => {
        let json = res.data;
        this.postCount = json.Data.total;
        this.maxAlive = json.Data.hotType;
      });
    },
    handleSelectedDate(daterange) {
        this.startTime = daterange[0]
        this.endTime = daterange[1]
    }
  },
  created() {
      this.blockList = ['从优待警','党务工作','法律咨询','警营文化','考试交流','热点问题','司令部业务工作交流','心理咨询','战术研讨','主题教育']
  },
  mounted() {
      this.renderAbstract()
      this.renderChart_ForumPublish()
      this.renderChart_ForumActive()
      this.renderTable(0)
  },
};
</script>

<style lang="" scoped>
.chart {
  height: 350px;
}
.toolbar .item{
  min-width: 300px;
  display: flex;
  flex-flow: row nowrap;
  align-items:center;
}
.toolbar .text{
  min-width: 100px;
  flex-grow: 0;
}
</style>